<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Copyright (c) 2006-2007. Adobe Systems Incorporated. All rights reserved. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Spry Multiple Elements Sliding Sample</title>
	<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
	<script  src="../../includes/SpryEffects.js" type="text/javascript" > </script>
	<style type="text/css">
		.demoDiv{
			height: 150px; 
			overflow: hidden;
		}
		.hiddenElement{
			display:none;
			/* Fix IE floating bug */
			position: absolute;
			top: 140px;
		}
	</style>
	<script type="text/javascript">
var observer = {};

observer.nextEffect = false;
observer.onPostEffect = function(e){
	if (this.nextEffect)
	{
		var eff = this.nextEffect;
		setTimeout(function(){eff.start();}, 10);
	}

	this.nextEffect = false;
}

function myPanelsSlides(currentPanel)
{
    // The list of all the panels that need sliding
	var panels = ['slide1', 'slide2', 'slide3', 'slide4'];
	var opened = -1;

	// Let's check if we have an effect for each of these sliding panels
	if (typeof effects == 'undefined')
		effects = {};

	for (var i=0; i < panels.length; i++)
	{
		if (typeof effects[panels[i]] == 'undefined'){
			effects[panels[i]] = new Spry.Effect.Slide(panels[i], {from: '0%', to: '100%', toggle: true});
			effects[panels[i]].addObserver(observer);
		}
		 
		if (effects[panels[i]].direction == Spry.forwards && currentPanel != panels[i])
			opened = i;

		//prevent too fast clicks on the buttons
		if (effects[panels[i]].direction == Spry.backwards && effects[panels[i]].isRunning)
		{
			observer.nextEffect = effects[currentPanel];
			return;
		}
	}

	if (opened != -1)
	{
		observer.nextEffect = effects[currentPanel];
		effects[panels[opened]].start();
	} 
	else if (effects[currentPanel].direction != Spry.forwards)
	{
		effects[currentPanel].start();
	}
};

	</script>
</head>
<body>
	<h3>Spry Multiple elements sliding</h3>

<p>This is a more advanced sample that will slide in the page an element after sliding out the element that was previously displayed. The order of clicking the buttons below is not important.</p>

<form method="get" action="shake_sample.html">
	<input type="button" onclick="myPanelsSlides('slide1');" value="Slide 1" />
	<input type="button" onclick="myPanelsSlides('slide2');" value="Slide 2" />
	<input type="button" onclick="myPanelsSlides('slide3');" value="Slide 3" />
	<input type="button" onclick="myPanelsSlides('slide4');" value="Slide 4" />
</form>
<br />

<div id="slide1" class="hiddenElement">
	<div class="demoDiv" style="background-color: yellow;">
		<h4>Example 1</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>
<div id="slide2" class="hiddenElement">
	<div class="demoDiv" style="background-color: pink;">
		<h4>Example 2</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>
<div id="slide3" class="hiddenElement">
	<div class="demoDiv" style="background-color: magenta;">
		<h4>Example 3</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>
<div id="slide4" class="hiddenElement">
	<div class="demoDiv" style="background-color: green;">
		<h4>Example 4</h4>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
			diam nonumy eirmod tempor invidunt ut labore et dolore magna
			aliquyam erat, sed diam voluptua. At vero eos et accusam et
			justo duo dolores et ea rebum. Stet clita kasd gubergren, no
			sea takimata sanctus est Lorem ipsum dolor sit amet.
	</div>
</div>
</body>
</html>
